<template>
  <div class="background-container">
    <DynamicBackground />
    <div class="register-container">
      <div class="register-form">
        <img src="/public/img/logo.png" alt="Logo" class="logo">
        <h2>注册</h2>
        <form @submit.prevent="handleSubmit">
          <div class="form-group">
            <label for="username">用户名</label>
            <input type="text" id="username" v-model="username" required>
          </div>
          <div class="form-group">
            <label for="email">电子邮箱</label>
            <input type="email" id="email" v-model="email" required>
          </div>
          <div class="form-group">
            <label for="emailCode">邮箱验证码</label>
            <input type="text" id="emailCode" v-model="emailCode" required>
            <button type="button" @click="sendEmailCode">获取验证码</button>
          </div>
          <div class="form-group">
            <label for="password">密码</label>
            <input type="password" id="password" v-model="password" required minlength="6" maxlength="15">
          </div>
          <div class="form-group">
            <label for="confirmPassword">确认密码</label>
            <input type="password" id="confirmPassword" v-model="confirmPassword" required minlength="6" maxlength="15">
          </div>
          <div class="form-group">
            <label for="birth">出生日期</label>
            <input type="date" id="birth" v-model="birth" :max="today" required>
          </div>
          <div class="form-group">
            <label for="captcha">验证码</label>
            <input type="text" id="captcha" v-model="captcha" required>
            <!-- 验证码图片 -->
            <img :src="captchaSrc" alt="Captcha" class="captcha-img" @click="refreshCaptcha">
          </div>
          <button class="register-submit" type="submit">注册</button>
        </form>
        <a href="/login" class="login-link">登录</a>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import DynamicBackground from './DynamicBackground.vue';
import axios from 'axios';
import dayjs from 'dayjs';
import "../css/register.css"
import { useRoute, useRouter } from 'vue-router';

const username = ref('');
const email = ref('');
const emailCode = ref('');
const password = ref('');
const confirmPassword = ref('');
const birth = ref('');
const captcha = ref('');
const captchaSrc = ref('');
const today = dayjs().format('YYYY-MM-DD'); // 获取今天的日期

const router = useRouter();

const RegisterInfoHttp = "http://localhost:8080/user/register";
const http = "http://localhost:8080/common/kaptcha";
const handleSubmit = async () => {
  try {
    const formattedBirth = dayjs(birth.value).format('YYYY-MM-DD');
    const userDto = {
      id: NaN,
      username: username.value,
      email: email.value,
      emailCode: emailCode.value,
      password: password.value,
      birth: formattedBirth,
      captcha: captcha.value
    };

    const response = await axios.post(RegisterInfoHttp, userDto, {
      headers: {
        'Content-Type': 'application/json'
      }
    });
    const result = response.data;
    const state = result.state;
    const errMessage = result.errMessage;
    if(state){
      alert("注册成功")
      router.push({ name: 'Login' });
    }else{
      alert(errMessage)
    }
  } catch (error) {
    alert("好像出问题了( ºΔº )");
  }
};

const refreshCaptcha = async() => {
  try {
    let response = await axios.get(http);
    let data = response.data;
    captchaSrc.value = data.image;
  } catch (error) {
    console.log(error)
  }
};

const sendEmailCode = () => {
  // 发送邮箱验证码的逻辑
  console.log('发送邮箱验证码到:', email.value);
  // 替换为实际发送验证码的逻辑，例如通过API请求
};
onMounted(() => {
  refreshCaptcha()
    });
</script>
